import React, { useState, useEffect } from 'react';
import Mock from "mockjs";
import { Divider, List, Typography, Button } from 'antd';
import Related from './Related_mechanisms.module.css'
import { Pagination } from 'antd';
export default function Relatedmechan() {
  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [list, setList] = useState([]);
  const [userdata, setUser] = useState([])
  const data1 = [
  ];
const licensePlateRegex = /^[A-Z]{1}[A-Z0-9]{2}$/;
function generateLicensePlate() {
  let plateNumber;
  do {
    plateNumber = Mock.mock({
      'plateNumber|1-10': function () {
        return Mock.mock(licensePlateRegex);
      },
    });
  } while (!licensePlateRegex.test(plateNumber.plateNumber));
  return plateNumber.plateNumber;
}
  const addinfo = () => {
    setLoading(false);
    var Random = Mock.Random;
    var a = ['车辆位置异常', '车辆速度异常', '车辆方向异常', '车辆行驶轨迹异常', '车辆姿态异常', '车辆传感器异常', '车辆通信异常']
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lettersArray = letters.split('');
    var count = 11;
    for (let i = 1; i < count; i++) {
      let value1 = a[Math.floor(Math.random() * a.length)];
      let value2 = lettersArray[Math.floor(Math.random() * lettersArray.length)];
      const processedMonth = (count-i) < 10 ? "0" + (count-i) : (count-i);
      data1.push(
        Mock.mock({
          id: i,
          birth: '2023-' + processedMonth +Random.datetime("-dd HH:mm:ss"),  
          value: value1,
          value2: '粤 '+generateLicensePlate()+'***',
        })
      );
    }
    setInitLoading(false)
    setList(data1)
    console.log(data1);
  }
  useEffect(() => {
    addinfo()
    setList(data1)
  }, [])
  return (
    <div className={Related.Relatedhe}>
      <Divider orientation="left">预警记录</Divider>
      <List
        loading={initLoading}
        bordered
        dataSource={list}
        renderItem={(item, index) => (
          <List.Item >
            <div className={Related.Relatedinfo}>
              <span className={Related.Relatedinfo1}>
                [{item.id}] {item.value}
              </span>
              <span className={Related.Relatedinfo1}>
                车牌号：{item.value2}
              </span>
              <span className={Related.Relatedinfo2}>
                {item.birth}
                </span>
            </div>
          </List.Item>
        )}/>
      <div className={Related.btom_Pagination}>
        <Pagination defaultCurrent={1} total={50} />
      </div>
    </div>
  )
}
